<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: zoud
  Date: 28/09/2016
  Time: 18:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Database Commons - Create database</title>
</head>
<body>
<h2 class="ui header">Curate database - ${db.shortName}</h2>
<div class="sub header text red">Notes: Please write below information carefully, this is very important!</div>

<c:if test="${msg != null}">
    <div class="ui message">
        <i class="close icon"></i>
        <div class="header">
                ${msg}
        </div>
    </div>
</c:if>

<div class="ui big pointing menu steps">
    <a class="step item active" data-tab="basic" href="#bi">
        <i class="info icon"></i>
        <div class="content">
            <div class="title">Basic information</div>
        </div>
    </a>
    <a class="step item" data-tab="dataInfo" href="#di">
        <i class="tasks icon"></i>
        <div class="content">
            <div class="title red">Data information</div>
        </div>
    </a>
    <a class="step item" data-tab="contactInfo" href="#ci">
        <i class="mail icon"></i>
        <div class="content">
            <div class="title">Contact information</div>
        </div>
    </a>
    <a class="step item" data-tab="publicationInfo" href="#pi">
        <i class="book icon"></i>
        <div class="content">
            <div class="title">Publication information</div>
        </div>
    </a>
</div>

<!-- basic -->
<div class="ui tab active segment" data-tab="basic">
    <form class="ui form small" method="post" action="${host}/curator/db/update/basic">
        <h3 class="ui header blue" id="bi"><i class="icon info"></i> Basic information</h3>
        <div class="two fields">
            <div class="field required">
                <label class="text red">Short Name</label>
                <div class="ui input">
                    <input type="text" name="shortName" placeholder="Database short name" value="${db.shortName}"/>
                </div>
            </div>
            <div class="field">
                <label class="text red">Full Name</label>
                <div class="ui input">
                    <input type="text" name="fullName" placeholder="Database full name" value="${db.fullName}"/>
                </div>
            </div>
        </div>
        <div class="three fields">
            <div class="field">
                <label class="text red">Year founded</label>
                <div class="ui input">
                    <input type="text" name="yearFounded" placeholder="Database year founded"
                           value="${db.foundedYear}"/>
                </div>
            </div>
            <div class="field">
                <label class="text red">Last updated</label>
                <input type="text" placeholder="Last updated" name="lastUpdated" value="${db.lastUpdate}"/>
            </div>
            <div class="field">
                <label class="text">Current version</label>
                <input type="text" placeholder="Current version" name="currentVersion" value="${db.currentVersion}"/>
            </div>
        </div>
        <div class="two fields">
            <div class="field required">
                <label class="text red">URL</label>
                <div class="ui input">
                    <input type="url" name="url" placeholder="Database URL" value="${db.url}"/>
                </div>
            </div>
            <div class="field required">
                <label class="text red">Availability</label>
                <div class="ui input">
                    <select name="availability" class="avail">
                        <option value="Free to academic users only">Free to academic users only</option>
                        <option value="Free to all users">Free to all users</option>
                        <option value="Not Available">Not Available</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="field required">
            <label class="text red">Description</label>
            <div class="ui input">
                <textarea name="description" placeholder="Description" rows="5">${db.description}</textarea>
            </div>
        </div>
        <div class="field">
            <input type="hidden" value="${currentUser.userId}" name="userId"/>
            <input type="hidden" value="${db.dbId}" name="dbId"/>
            <button type="submit" id="basicSubmit" class="ui button large green">Save</button>
        </div>
    </form>
</div>
<!-- Data -->
<div class="ui tab segment" data-tab="dataInfo">
    <form class="ui form small" method="post" action="${host}/curator/db/update/data">
        <h3 class="ui header teal" id="di"><i class="icon tasks"></i> Data information</h3>
        <div class="three fields">
            <div class="field required">
                <label>Date type</label>
                <select name="dataType" id="dataType" multiple style="width: 100%;">
                    <c:forEach items="${db.dataTypeList}" var="dt">
                        <option value="${dt.datatypeName}" selected>${dt.datatypeName}</option>
                    </c:forEach>
                </select>
                <%--<i class="plus icon link datetype"></i>--%>
                <div id="dt"></div>
            </div>
            <div class="field required">
                <label>Organism</label>
                <select name="organism" id="osm" multiple="multiple" style="width: 100%">
                    <c:forEach items="${db.organismList}" var="osm">
                        <option value="${osm.organismName}" selected>${osm.organismName}</option>
                    </c:forEach>
                    <%--<c:forEach items="${organisms}" var="osm">--%>
                    <%--<option value="${osm}">${osm}</option>--%>
                    <%--</c:forEach>--%>
                </select>
            </div>
            <div class="field required">
                <label class="text red">Keyword</label>
                <select name="keyword" id="kw" multiple="multiple" style="width: 100%">
                    <c:forEach items="${db.categoryList}" var="ca">
                        <option value="${ca.name}" selected>${ca.name}</option>
                    </c:forEach>
                    <%--<c:forEach items="${categories}" var="c">--%>
                    <%--<option value="${c}">${c}</option>--%>
                    <%--</c:forEach>--%>
                </select>
            </div>
        </div>
        <div class="field">
            <input type="hidden" value="${currentUser.userId}" name="userId"/>
            <input type="hidden" value="${db.dbId}" name="dbId"/>
            <button type="submit" class="ui button large green">Save</button>
        </div>
    </form>
</div>
<!-- contact -->
<div class="ui tab segment" data-tab="contactInfo">
    <form class="ui form small" method="post" action="${host}/curator/db/update/contact">
        <h3 class="ui header violet" id="ci"><i class="icon mail"></i> Contact information</h3>
        <div class="three fields">
            <div class="field required">
                <label class="text red">Country</label>
                <div class="ui input">
                    <input type="text" name="country" placeholder="Country" value="${db.country}"/>
                </div>
            </div>
            <div class="field required">
                <label class="text red">City</label>
                <input type="text" placeholder="City" name="city" value="${db.city}"/>
            </div>
            <div class="field">
                <label class="text">Province/State</label>
                <input type="text" placeholder="Province/State" name="province" value="${db.province}"/>
            </div>
        </div>
        <div class="field required">
            <label class="text red">University/Institution hosted</label>
            <input type="text" placeholder="University/Institution hosted" name="hostInstitution"
                   value="${db.hostInstitution}"/>
        </div>
        <div class="two fields">
            <div class="field required">
                <label class="text red">Contact email</label>
                <div class="ui input">
                    <input type="email" name="contactEmail" placeholder="Email" value="${db.contactEmail}"/>
                </div>
            </div>
            <div class="field required">
                <label class="text red">Contact name</label>
                <div class="ui input">
                    <input name="contactName" placeholder="Contact name" value="${db.contactName}"/>
                </div>
            </div>
        </div>
        <div class="field required">
            <label class="text red">Address</label>
            <div class="ui input">
                <textarea name="address" placeholder="Contact address" rows="3">${db.address}</textarea>
            </div>
        </div>
        <div class="field">
            <input type="hidden" value="${currentUser.userId}" name="userId" id="userId"/>
            <input type="hidden" value="${db.dbId}" name="dbId" id="dbId"/>
            <button type="submit" class="ui button large green">Save</button>
        </div>
    </form>
</div>
<!-- Publication -->
<div class="ui tab segment" data-tab="publicationInfo">
    <h3 class="ui header green" id="pi"><i class="icon book"></i> Publications</h3>

    <form class="ui form small" id="addPub">
        <div class="ui field required">
            <div class="ui input action">
                <input type="text" placeholder="PubMed ID" name="pmid"/>
                <input type="hidden" value="${currentUser.userId}" name="userId"/>
                <input type="hidden" value="${db.dbId}" name="dbId"/>
                <button class="ui button" type="button" id="add">Add</button>
            </div>
        </div>
        <div class="ui error message"></div>
    </form>
    <div id="newPub"></div>
    <br>
    <c:forEach items="${db.publicationList}" var="pub" varStatus="i">
        <form class="ui form small" method="post" action="${host}/curator/db/update/publication">
            <div class="segment ui">
                <div class="field required">
                    <label class="text red">PubMed id</label>
                    <div class="ui input icon">
                        <input type="text" placeholder="Pubmed id" name="pmid" value="${pub.pmid}"/>
                    </div>
                </div>
                <div class="three fields">
                    <div class="field required">
                        <label class="text red">Title</label>
                        <div class="ui input">
                            <input type="text" name="title" placeholder="Paper title" value="${pub.title}"/>
                        </div>
                    </div>
                    <div class="field required">
                        <label class="text red">Authors</label>
                        <input type="text" placeholder="Paper authors" name="author" value="${pub.author}"/>
                    </div>
                    <div class="field required">
                        <label class="text red">Citations</label>
                        <input type="text" placeholder="Citations" name="citation" value="${pub.citation}"/>
                    </div>
                </div>
                <div class="four fields">
                    <div class="field required">
                        <label class="text red">Journal name</label>
                        <input type="text" placeholder="Journal name" name="journal" value="${pub.journal}"/>
                    </div>
                    <div class="field required">
                        <label class="text red">Volume</label>
                        <div class="ui input">
                            <input type="text" name="volume" placeholder="Journal volume" value="${pub.volume}"/>
                        </div>
                    </div>
                    <div class="field required">
                        <label class="text red">Issue</label>
                        <div class="ui input">
                            <input name="issue" placeholder="Journal issue" value="${pub.issue}"/>
                        </div>
                    </div>
                    <div class="field">
                        <label class="text">Published year</label>
                        <input type="text" placeholder="Published year" name="year" value="${pub.year}"/>
                    </div>
                </div>
                <div class="field required">
                    <label class="text red">Abstract</label>
                    <div class="ui input">
                        <textarea name="abst" placeholder="Paper abstract" rows="5">${pub.abst}</textarea>
                    </div>
                </div>
            </div>
            <div class="field">
                <input type="hidden" value="${currentUser.userId}" name="userId"/>
                <input type="hidden" value="${db.dbId}" name="dbId"/>
                <input type="hidden" value="${pub.id}" name="pubId"/>
                <button type="submit" class="ui button large green">Save</button>
                <a href="${host}/curator/db/publication/delete?pubId=${pub.id}&dbId=${db.dbId}&userId=${currentUser.userId}"
                   class="ui button large red" onclick="return confirm('Delete it?');">Delete</a>
            </div>
        </form>
        <hr>
    </c:forEach>

</div>
<script>
    $(document).ready(function () {
        $('.menu .item').tab();

        $('#dataType').select2({
            minimumInputLength: 1,
            minimumResultsForSearch: Infinity,
            tags: true,
            tokenSeparators: [',', ' '],
            ajax: {
                url: '${host}/dataType/name',
                dataType: 'json',
                data: function (params) {
                    return {
                        q: params.term
                    }
                },
                processResults: function (data) {
                    var result = [];
                    for (var i = 0; i < data.length; i++) {
                        result[i] = {id: data[i], text: data[i]};
                    }
                    console.log(data);
                    return {
                        results: result
                    };
                }
            }
        });

        $('#osm').select2({
            tags: true,
            minimumInputLength: 1,
            ajax: {
                url: '${host}/organism/name',
                dataType: 'json',
                data: function (params) {
                    return {
                        q: params.term
                    }
                },
                processResults: function (data) {
                    var result = [];
                    for (var i = 0; i < data.length; i++) {
                        result[i] = {id: data[i], text: data[i]};
                    }
                    console.log(data);
                    return {
                        results: result
                    };
                }
            }
        });

        $('#kw').select2({
            tags: true,
            minimumInputLength: 1,
            ajax: {
                url: '${host}/category/name',
                dataType: 'json',
                data: function (params) {
                    return {
                        q: params.term
                    }
                },
                processResults: function (data) {
                    var result = [];
                    for (var i = 0; i < data.length; i++) {
                        result[i] = {id: data[i], text: data[i]};
                    }
                    console.log(data);
                    return {
                        results: result
                    };
                }
            }
        });


        $('.plus.icon.link.organism').click(function (e) {
            e.preventDefault();
            $('#osm').append('<div class="ui input icon can-remove"><input name="organism" placeholder="Organism name"/><i class="trash link icon" ></i></div>');
        });

        $(document).on('click', '.trash.link.icon', function (e) {
            e.preventDefault();
            $(this).parent().remove();
        });

        $('.plus.icon.link.datetype').click(function (e) {
            e.preventDefault();
            $('#dt').append('<div class="ui input icon can-remove"><input name="datatype" placeholder="Date type name"/><i class="trash link icon" ></i></div>');
        });

        $(document).on('click', '.trash.link.icon', function (e) {
            e.preventDefault();
            $(this).parent().remove();
        });

        $('.plus.icon.link.keyword').click(function (e) {
            e.preventDefault();
            $('#kw').append('<div class="ui input icon can-remove"><input name="keyword" placeholder="Keyword"/><i class="trash link icon" ></i></div>');
        });

        $(document).on('click', '.trash.link.icon', function (e) {
            e.preventDefault();
            $(this).parent().remove();
        });
    });


    $('.avail option').each(function () {
        if ($(this).val() == '${db.availableProtocol}') {
            $(this).attr('selected', true);
        }
    });

</script>
<script>
    $(document).ready(function () {
        $('#add').click(function () {
            var pmid = $('input[name="pmid"]').val();
            var userId = $('#userId').val();
            var dbId = $('#dbId').val();
            if (pmid == null || pmid == "") {
                $('#newPub').html('<div class="ui message error"><p>PMID is required!</p></div>');
            } else {
                $.ajax({
                    url: '${host}/curator/db/update/publication/add?pmid=' + pmid + '&userId=' + userId + '&dbId=' + dbId,
                    type: 'get',
                    success: function (data) {
                        $('#newPub').append(
                            '<form class="ui form small" method="post" action="${host}/curator/db/update/publication/update">' +
                            '<div class="ui message"> <i class="close icon"></i> <div class="header">Operation is successful</div> </div>' +
                            '<div class="segment ui"> <div class="field required"> <label class="text red">PubMed id</label> <div class="ui input icon"> <input type="text" placeholder="Pubmed id" name="pmid" value="' + data.pmid + '"> </div> </div> <div class="two fields"> <div class="field required"> <label class="text red">Title</label> <div class="ui input"> <input type="text" name="title" placeholder="Paper title" value="' + data.title + '"> </div> </div> <div class="field required"> <label class="text red">Authors</label> <input type="text" placeholder="Paper authors" name="author" value="' + data.author + '"> </div> </div> <div class="four fields"> <div class="field required"> <label class="text red">Journal name</label> <input type="text" placeholder="Journal name" name="journal" value="' + data.journal + '"> </div> <div class="field required"> <label class="text red">Volume</label> <div class="ui input"> <input type="text" name="volume" placeholder="Journal volume" value="' + data.volume + '"> </div> </div> <div class="field required"> <label class="text red">Issue</label> <div class="ui input"> <input name="issue" placeholder="Journal issue" value="' + data.issue + '"> </div> </div> <div class="field"> <label class="text">Published year</label> <input type="text" placeholder="Published year" name="year" value="' + data.year + '"> </div> </div> <div class="field required"> <label class="text red">Abstract</label> <div class="ui input"> <textarea name="abst" placeholder="Paper abstract" rows="5">' + data.abst + '</textarea> </div> </div> </div> <div class="field"> <input type="hidden" value="${currentUser.userId}" name="userId"> <input type="hidden" value="${db.dbId}" name="dbId"> <button type="submit" class="ui button large green">Save</button> <a href="${host}/curator/db/publication/delete?pubId=' + data.id + '&dbId=' + dbId + '&userId='+userId+'" class="ui button large red" class="del">Delete</a> </div> </form> <hr>'
                        )
                    },
                    error: function () {
                        $('#newPub').html('<div class="ui message error"><p>Something error happened!</p></div>');
                    }
                })
            }
        });

        $('.del').on('click', function () {
            return confirm("Delete it?");
        });

        $('.message .close').on('click', function () {
            $(this)
                .closest('.message')
                .transition('fade')
            ;
        });
    });
</script>
</body>
</html>
